<template>
  <div class="building-container">
    <!-- 搜索区域 -->
    <el-form :inline="true" :model="params" class="demo-form-inline">
      <el-form-item label="一体杆名称">
        <el-input v-model="params.poleName" placeholder="请输入一体杆名称" />
      </el-form-item>
      <el-form-item label="一体杆编号">
        <el-input v-model="params.poleNumber" placeholder="请输入一体杆编号" />
      </el-form-item>
      <el-form-item label="运行状态">
        <el-select v-model="params.poleStatus" placeholder="请选择运行状态">
          <el-option label="全部" value="" />
          <el-option label="正常" value="0" />
          <el-option label="异常" value="1" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <div class="create-container">
      <el-button type="primary" @click="addRod">添加一体杆</el-button>
      <el-button @click="delManageList">批量删除</el-button>
    </div>
    <!-- 表格区域 -->
    <div class="table">
      <el-table
        ref="multipleTable"
        :data="list"
        style="width: 100%"
        @selection-change="getManageList"
      >
        <el-table-column
          type="selection"
          width="55"
          prop="id"
        />
        <el-table-column
          label="序号"
          width="150"
          type="index"
        />
        <el-table-column
          label="一体杆名称"
          width="250"
          prop="poleName"
        />
        <el-table-column
          width="150"
          label="一体杆编号"
          prop="poleNumber"
        />
        <el-table-column
          width="200"
          label="一体杆IP"
          prop="poleIp"
        />
        <el-table-column
          width="200"
          label="安装区域"
          prop="areaName"
        />
        <el-table-column
          width="200"
          label="一体杆类型"
          prop="poleType"
        >
          <template #default="scope">{{ modType(scope.row.poleType) }}</template>
        </el-table-column>
        <el-table-column
          width="200"
          label="运行状态"
          prop="poleStatus"
        >
          <template #default="scope">{{ modStatus(scope.row.poleStatus) }}</template>
        </el-table-column>
        <el-table-column width="150" label="操作">
          <template #default="scope">
            <el-button size="mini" @click="putman(scope.row)">编辑</el-button>
            <el-button size="mini" @click="removeMan(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="page-container">
        <el-pagination
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          :current-page="1"
          :page-sizes="[10,20,50,100]"
          :page-size="10"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <!-- 弹框 -->
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="580px"
      @close="closeDialog"
    >
      <template>
        <el-form ref="ManForm" class="demo-ruleForm" :model="fromRod" :rules="rules">
          <el-form-item label="一体杆名称" prop="poleName">
            <el-input v-model="fromRod.poleName" placeholder="请输入一体杆名称" />
          </el-form-item>
          <el-form-item label="一体杆编号" prop="poleNumber">
            <el-input v-model="fromRod.poleNumber" placeholder="请输入一体杆编号" />
          </el-form-item>
          <el-form-item label="一体杆IP" prop="poleIp">
            <el-input v-model="fromRod.poleIp" placeholder="请输入一体杆IP" />
          </el-form-item>
          <el-form-item label="关联区域" prop="areaId">
            <br>
            <el-select v-model.number="fromRod.areaId" placeholder="请选择关联区域">
              <el-option v-for="(item,index) in list" :key="index" :label="item.areaName" :value="item.areaId" />
            </el-select>
          </el-form-item>
          <el-form-item label="一体杆类型" prop="poleType">
            <br>
            <el-select v-model="fromRod.poleType" placeholder="请选择一体杆类型">
              <el-option label="入口" value="entrance" />
              <el-option label="出口" value="export" />
            </el-select>
          </el-form-item>
        </el-form>
      </template>
      <template #footer>
        <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="submitForm">确 定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { getManageAPI, putManageAPI, addManageAPI, removeManageAPI } from '@/api/rodManage'
export default {
  name: 'Building',
  data() {
    return {
      params: {
        page: 1,
        pageSize: 10,
        poleName: null,
        poleNumber: null,
        poleStatus: null
      },
      list: [],
      total: 0,
      title: '新增一体杆',
      dialogVisible: false,
      fromRod: {
        poleName: '',
        poleNumber: '',
        poleIp: '',
        areaId: '',
        poleType: ''
      },
      rules: {
        poleName: [{ required: true, message: '请输入一体杆名称', trigger: 'blur' }],
        poleNumber: [{ required: true, message: '请输入一体杆编号', trigger: 'blur' }],
        poleIp: [{ required: true, message: '请输入一体杆IP', trigger: 'blur' }],
        areaId: [{ required: true, message: '请选择关联区域', trigger: 'change' }],
        poleType: [{ required: true, message: '请选择一体杆类型', trigger: 'change' }]
      },
      deleteList: []
    }
  },
  mounted() {
    this.getmanage()
  },
  methods: {
    // 获取页面数据
    async getmanage() {
      const res = await getManageAPI(this.params)
      // console.log(res.data)
      this.list = res.data.rows
      // console.log(this.list)
      this.total = res.data.total
    },
    // 点击确认按钮
    onSubmit() {
      this.getmanage()
    },
    // 修改一体杆类型数据状态
    modType(type) {
      const TYPEMAP = {
        entrance: '入口',
        export: '出口',
        center: '中心'
      }
      return TYPEMAP[type]
    },
    // 修改一体杆状态
    modStatus(id) {
      const StatusMAP = {
        0: '正常',
        1: '异常'
      }
      return StatusMAP[id]
    },
    // 页面大小改变是触发事件
    handleSizeChange(val) {
      this.params.pageSize = val
      this.getmanage()
    },
    // 页面改变的时候触发事件
    handleCurrentChange(val) {
      this.params.page = val
      this.getmanage()
    },
    // 关闭弹窗
    closeDialog() {
      // 校验
      this.$refs.ManForm.clearValidate()
      this.$refs.ManForm.resetFields()

      this.dialogVisible = false
      this.fromRod = {
        poleName: '',
        poleNumber: '',
        poleIp: '',
        areaId: '',
        poleType: ''
      }
      this.getmanage()
    },
    // 新增一体杆点击按钮
    addRod() {
      this.dialogVisible = true
      this.title = '新增一体杆'
      delete this.fromRod.id
    },
    // from表单确定按钮
    submitForm(formName) {
      console.log(formName)
      this.$refs.ManForm.validate(async(valid) => {
        if (this.fromRod.id) {
          await putManageAPI(this.fromRod)
          this.dialogVisible = false
          this.getmanage()
        } else {
          if (valid) {
            try {
              await addManageAPI(this.fromRod)
              this.$message({
                message: '操作成功',
                type: 'success'
              })
              this.dialogVisible = false
              this.getmanage()
            } catch (error) {
              this.$message({
                message: '操作失败',
                type: 'error'
              })
            }
          }
        }
      })
    },
    // 编辑按钮
    putman(row) {
      // 1.打开弹框
      this.dialogVisible = true
      this.title = '编辑一体杆'
      // 2.结构必要字段
      const { poleName, poleNumber, poleIp, areaId, poleType, id } = row
      this.fromRod = {
        poleName, poleNumber, poleIp, areaId, poleType, id
      }
    },
    // 单独删除功能
    async removeMan(id) {
      console.log(id)
      await removeManageAPI(id)
      this.getmanage()
    },
    getManageList(val) {
      this.deleteList = val.map(el => el.id)
    },
    async delManageList() {
      await removeManageAPI(this.deleteList.toString())
      this.getmanage()
    }

  }
}
</script>

<style lang="scss" scoped>
.department-container{
  padding:10px;
}
.search-container{
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgb(237,237,237,.9);;
  padding-bottom: 20px;
  .search-label{
    width:100px;
  }
  .search-main{
    width: 220px;
    margin-right: 10px;
  }
}
  .page-container{
    padding:4px 0px;
    text-align: right;
  }
  .building-container{
    overflow: auto;
    height: calc(100vh - 100px);
  }
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
  .el-form{
    .el-select{
      width: 100%;
    }
  }
</style>
